<template>
  <!--三级分类的卡片-->
  <el-card style="margin-bottom: 20px;text-align: center">
    <!-- :show是传给子组件(三级联动的属性),子组件用这个值来切换disabled-->
    <CategorySelect @doChange="getCateGoryId" :show="scene!=0"></CategorySelect>
  </el-card>
  <!--内容切换区的卡片-->
  <el-card>
    <!--展示spu列表区域-->
    <div v-show="scene == 0">
      <el-button type="primary" :disabled="!categoryThreeId" @click="addSpu">
        <el-icon>
          <Plus/>
        </el-icon>
        添加spu
      </el-button>
      <el-table style="margin: 10px 0" border :data="records">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column label="spu名称" prop="spuName"></el-table-column>
        <el-table-column label="spu描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-tooltip content="添加sku" placement="bottom">
              <el-button type="success" size="small" @click="addSku(row)">
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="编辑sku" placement="bottom">
              <el-button type="warning" size="small" @click="updateSpu(row)">
                <el-icon>
                  <Edit/>
                </el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="查看当前sku的全部sku列表" placement="bottom">
              <el-button type="info" size="small" @click="handleShowDlialog(row)">
                <el-icon>
                  <View/>
                </el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除sku" placement="bottom">
              <el-button type="danger" size="small" @click="deleteSpu(row)">
                <el-icon>
                  <Delete/>
                </el-icon>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          small
          background
          pager-count="5"
          :current-page="page"
          :page-size="limit"
          :page-sizes="[3, 5, 7]"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <div>
      <!--添加或修改spu时的区域-->
      <SkuForm v-show="scene == 1" @changeScene="changeChangeScene" ref="skuForm"></SkuForm>
      <!--添加sku区域-->
      <SpuForm v-show="scene == 2" @changeScenes="changeChangeScenes" ref="sku"></SpuForm>
    </div>
  </el-card>
  <!--查看sku对话框-->
  <el-dialog v-model="dialogTableVisible" :title="`${spu.spuName}的sku列表`" draggable width="70%"
             :before-close="dialogClose">
    <el-table :data="skuList" border v-loading="loading">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column align="center" label="名称" prop="skuName"></el-table-column>
      <el-table-column align="center" label="价格" prop="price"></el-table-column>
      <el-table-column align="center" label="重量" prop="weight"></el-table-column>
      <el-table-column align="center" label="默认图片" prop="skuName">
        <template v-slot="{row}">
          <img style="height: 100px;width: 100px" :src="row.skuDefaultImg">
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import CategorySelect from "../../components/CategorySelect";
import {reqDeleteSpu, reqSkuList, reqSpuList} from "../../api/realRequests";
import SkuForm from "../../components/SkuForm";
import SpuForm from "../../components/SpuForm";
import {ElMessage} from "element-plus";

export default {
  name: "spu",
  components: {SpuForm, SkuForm, CategorySelect},
  data() {
    return {
      // 用来接受子组件传来的一，二，三级id
      categoryOneId: '',
      categoryTwoId: '',
      categoryThreeId: '',
      // 分页数据
      page: 1,
      limit: 5,
      total: 0,
      // spu列表数据
      records: [],
      // 控制div的切换   sence:0代表展示spu列表;1代表添加spu或者修改spu;2代表添加sku
      scene: 0,
      // 对话框显隐
      dialogTableVisible: false,
      //
      spu: {},
      // sku列表数据(服务器返回)
      skuList: [],
      // 加载动画的显示
      loading: true
    }
  },
  methods: {
    // 父组件接受，自定事件的回调(params就是子组件传来的对象，形参)
    getCateGoryId(params) {
      // 接受子组件传来的值
      this.categoryOneId = params.category1Id
      this.categoryTwoId = params.category2Id
      this.categoryThreeId = params.category3Id
      // 调方法，获得数据
      this.getSpuList()
    },
    // 获取spu列表数据
    async getSpuList() {
      // console.log(1111)
      let result = await reqSpuList(this.page, this.limit, this.categoryThreeId)
      // console.log(result)
      if (result.code == 200) {
        this.total = result.data.total
        this.records = result.data.records
      }
    },
    // 当分页器被点击的页码改变时触发，element-ui会把当前点击的页码作为参数，进行传递
    handleCurrentChange(page) {
      this.page = page
      this.getSpuList()
    },
    // 页码规格改变时触发，element-ui会把当前设置的每页的页码数作为参数，进行传递
    handleSizeChange(limit) {
      this.limit = limit
      this.page = 1
      this.getSpuList()
    },
    // 添加spu
    addSpu() {
      // 切换场景
      this.scene = 1
      // 通知子组件发请求(2个),并把三级分类的id给子组件
      this.$refs.skuForm.addSpuData(this.categoryThreeId)
    },
    // 修改spu
    updateSpu(row) {
      // 切换div
      this.scene = 1
      // 获取子组件spuForm，并触发其身上的方法
      this.$refs.skuForm.initSpuData(row)
    },
    // 子组件会触发的自定义事件的方法
    changeChangeScene() {
      this.scene = 0
      // console.log('切换执行')
      // 重新获取列表数据
      this.getSpuList(this.page)
    },
    // 删除spu
    async deleteSpu(row) {
      let res = await reqDeleteSpu(row.id)
      console.log(res)
      if (res.code == 200) {
        ElMessage({message: '删除成功！', type: 'success', duration: 2000})
        // 删完某条数据后，本页还有至少一条数据，就留在当前页，一条也没有了，就展示上一页
        this.getSpuList(this.records.length > 1 ? this.page : this.page - 1)
      }
    },
    // 求换场景到添加sku
    addSku(row) {
      // 切换为场景2
      this.scene = 2
      // 父组件调用子组件的方法，让子组件发请求（3个）
      this.$refs.sku.getData(this.categoryOneId, this.categoryTwoId, row)
    },
    // skuform通知本父组件切换场景
    changeChangeScenes() {
      this.scene = 0
    },
    // 查看sku列表按钮
    async handleShowDlialog(row) {
      // 打开对话框
      this.dialogTableVisible = true
      // 将该行的spu信息进行保存
      this.spu = row
      // 发请求，获取sku列表数据
      let res = await reqSkuList(this.spu.id)
      // console.log(res)
      if (res.code == 200) {
        this.skuList = res.data
        // 清除loading效果
        this.loading = false
      }
    },
    // 关闭对话框时的回调(done为自己注入的参数)
    dialogClose(done) {
      this.loading = true
      // 清除对话框中的sku列表数据
      this.skuList = []
      // 关闭对话框
      done()
    }
  }
}
</script>

<style scoped>

</style>